<template>

    <!-- 左侧菜单 -->
    <div class="container">
        <van-sidebar v-model="active">
            <a :href="'#'+index"  v-for="(item, index) in cateLists.cateLists" @click=handleActive(index)>
                <div>
                    <van-sidebar-item :key="item.id" :title="item.categoryName"
                        :class="{ active: index === activeIndex }" />
                </div>
            </a>
        </van-sidebar>


        <!-- 右侧内容 -->
        <div class="rightSedCate">
            <div class="cateItem" v-for="(item, index) in cateLists.cateLists" :id="index">
                <span class="title">{{ item.categoryName }}</span>
                <div class="detail">
                    <div class="content" v-for="(good, i) in item.goodsList" :key="good.id"
                        @click="$router.push({ path: '/goods_detail', query: { goodId: good.id } })">
                        <img :src="good.imgUrl" alt="">
                        <span>{{ good.title }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import { getSideMainCategory } from '@/api/category'
export default {
    name: "",
    data() {
        return {
            active: 0,
            cateLists: [],
            secondCates: [],
            activeIndex: 0
        }
    },
    async created() {
        this.cateLists = await getSideMainCategory()
    },
    methods: {
        handleActive(e) {
            this.activeIndex = e
        },
    }

}
</script>

<style lang="less" scoped>
.container {
    display: flex;
    top: 50px;
    left: 0;
    // margin-bottom: 50px;
    // bottom: 50px;
    color: rgb(66, 64, 64);
    position: fixed;
    height: calc(100% - 100px);

    .active {
        color: rgb(255, 123, 0);
    }

    .rightSedCate {
        width: 80%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;


        .cateItem {
            font-family: '微软雅黑';
            font-weight: 400;

            .title {
                display: block;
                text-align: center;
                font-size: 18px;
                margin: 25px 0;
            }

            .detail {
                display: flex;
                flex-wrap: wrap;
                justify-content: start;

                img {
                    width: 80px;
                    height: 80px;
                    margin: 0 8px;
                }

                span {
                    display: block;
                    font-size: 14px;
                    text-align: center;
                    margin: 15px 0;
                }
            }
        }
    }
}
</style>